<template>
	<tm-fullView>
		<template v-slot:default="{info}">
			<view :style="{minHeight:info.height+'px'}" :class="[$tm.vx.state().tmVuetify.black?'black':'grey text']">
				<tm-menubars title="我的账本" color="bg-gradient-primary-lighten" :showback="true"></tm-menubars>
				<view class="shadow-24 ">
					<tm-sheet :padding="[16,16]" :shadow="24"  v-if="list.length > 0">
						<view class="text-size-s text-weight-b mb-24">
							<tm-switchList :title="item.name" :label="item.createTime" :actions="item.status == 1 ? item_2:item_1 "
								@actionsClick="((e)=>{action(e, item)})" v-for="(item,index) in list" :key='item.id'
								:rightLabel="item.selected == 1 ? '默认':'' "></tm-switchList>
						</view>
					</tm-sheet>
				</view>
				<view class="ma-32">
					<tm-button block @click="addBook">新增账本</tm-button>
				</view>
				<tm-poup v-model="showremark" position="top" height="720" @change='gogog'>
					<view style="height: 100rpx;"></view>
					<tm-form @submit="submit" ref="formData" @request="success">
						<view class="shadow-24 ">
							<tm-sheet color="blue text" :shadow="24">
								<tm-input name="name" required title="名称" v-model="book.name"></tm-input>
								<view class="mx-32 my-12 border-b-1  pb-12 flex-between"
									:class="$tm.vx.state().tmVuetify.black ? 'bk' : ''">
									<text class="text-size-n ">默认账本</text>
									<tm-groupradio @change="shiguchechange">
										<tm-radio v-model="groupchecked.c_1" name="0" label="否"></tm-radio>
										<tm-radio v-model="groupchecked.c_2" name="1" label="是"></tm-radio>
									</tm-groupradio>
								</view>
							</tm-sheet>
							<tm-button navtie-type="form" theme="bg-gradient-blue-accent" block>保存</tm-button>
						</view>
					</tm-form>
				</tm-poup>
				
				<tm-poup v-model="share" position="center" width="700" height="700">
						<tm-images :previmage="false"  :width="650" :height="650"  :src="shareurl" v-if="shareurl != null && shareurl != ''"></tm-images>
				</tm-poup>
			</view>
		</template>
	</tm-fullView>
</template>
<script>
	import tmFullView from "@/tm-vuetify/components/tm-fullView/tm-fullView.vue"
	import tmMenubars from "@/tm-vuetify/components/tm-menubars/tm-menubars.vue"
	import tmSheet from "@/tm-vuetify/components/tm-sheet/tm-sheet.vue"
	import tmSwitchList from '@/tm-vuetify/components/tm-switchList/tm-switchList.vue'
	import tmButton from '@/tm-vuetify/components/tm-button/tm-button.vue';
	import tmForm from "@/tm-vuetify/components/tm-form/tm-form.vue"
	import tmPoup from "@/tm-vuetify/components/tm-poup/tm-poup.vue"
	import tmInput from "@/tm-vuetify/components/tm-input/tm-input.vue"
	import tmRadio from "@/tm-vuetify/components/tm-radio/tm-radio.vue"
	import tmGroupradio from "@/tm-vuetify/components/tm-groupradio/tm-groupradio.vue"
	import tmImages from "@/tm-vuetify/components/tm-images/tm-images.vue"
	import tmDivider from "@/tm-vuetify/components/tm-divider/tm-divider.vue"
	export default {
		components: {
			tmFullView,
			tmMenubars,
			tmSheet,
			tmSwitchList,
			tmButton,
			tmForm,
			tmPoup,
			tmInput,
			tmRadio,
			tmGroupradio,
			tmImages,
			tmDivider
		},
		data() {
			return {
				show: false,
				list: [],
				selected: null,
				open: false,
				showremark: false,
				groupchecked: {
					c_1: true,
					c_2: false
				},
				shareurl: '',
				share: false,
				item_1: [{
						text: "编辑",
						width: 140,
						color: 'black'
					},
					{
						text: "共享",
						width: 140,
						color: 'blue'
					},
					{
						text: "删除",
						width: 140,
						color: 'red'
					},
				],
				item_2: [{
						text: "编辑",
						width: 140,
						color: 'black'
					},
					{
						text: "取消共享",
						width: 140,
						color: 'blue'
					},
					{
						text: "删除",
						width: 140,
						color: 'red'
					},
				],
				book: {
					id: '',
					name: '',
					selected: null,
					uid: ''
				}
			}
		},
		onShow() {
			this.loadBook()
			this.shareurl = ''
		},
		methods: {
			gogog(e) {
				if (!e) {
					this.book = {
						id: '',
						name: '',
						selected: null
					}
					this.groupchecked = {
						c_1: true,
						c_2: false
					}
				}
			},
			submit(e) {
				if (e === false) {
					uni.$tm.toast("请填写必填项")
				} else {
					this.judgeLogin(res => {
						this.book.uid = res.id
						this.$ajax.post('/book/save', this.book).then(res => {
							if (res.code == 1) {
								uni.$tm.toast("保存成功")
								this.book = {
									id: '',
									name: '',
									selected: null
								}
								this.showremark = false
								this.loadBook()
							} else {
								uni.$tm.toast('保存失败');
							}
						})
					})
				}
			},
			shiguchechange(e) {
				if ((e[0].name == '1' && e[0].checked) || (e[0].name == '0' && !e[0].checked)) {
					this.book.selected = 1;
				} else {
					this.book.selected = 0;
				}
			},
			success(e) {
				//提交成功 。
				uni.$tm.toast(e.msg)
			},
			loadBook() {
				this.judgeLogin(res => {
					this.$ajax.post('/book/list', {
						uid: res.id
					}).then(res => {
						this.list = res.data;
					})
				})
			},
			addBook() {
				this.showremark = true;
			},
			action(e, item) {
				this.shareurl = ''
				this.open = false;
				let that = this;
				if (e.index == 0) {
					this.showremark = true;
					this.book = item
					console.log(this.book)
					if (this.book.selected == 1) {
						this.groupchecked.c_2 = true;
					} else {
						this.groupchecked.c_1 = true;
					}
				} else if(e.index == 1){
					if(item.status == 1) {
						uni.showModal({
							title: '提示',
							content: '确认取消共享账本?',
							success: function(res) {
								if (res.confirm) {
									that.$ajax.get('/book/noshare/' + item.id).then(res => {
										if(res.code == 1) {
											that.loadBook()
										}
									})
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
					}else {
						uni.showModal({
							title: '提示',
							content: '共享账本,扫码查看',
							success: function(res) {
								if (res.confirm) {
									that.$ajax.get('/book/share/' + item.id).then(res => {
										if(res.code == 1) {
											that.share = true
											that.shareurl = "data:image/jpg;base64,"+res.data
										}
									})
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
					}
				}else {
					uni.showModal({
						title: '提示',
						content: '确定删除该账本及账本下的账单?',
						success: function(res) {
							if (res.confirm) {
								that.$ajax.get('/book/delete/' + item.id).then(res => {
									that.loadBook()
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}
			},
			saveBook() {

			},
			openurl(e) {
				let t = this;
				console.log(e);
				uni.navigateTo({
					url: e.data.url,
					fail: e => {
						t.show = true;
					}
				})
			}
		}
	}
</script>

<style>

</style>
